<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-model表单</title>
    <script src="../../js/vue3.js"></script>
    <style>
        body{
            background: url(../../img/Gwen_eva.png);
        }
        #app {
            margin: 2rem auto;
            width: 30%;
        }
        form{
            border: 1px solid black;
            padding: 1rem;
        }
        p {
            font-size: 1.5rem;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="app">
       <form>
        <h2>招新社</h2>
        <p>姓名: <input type="text" v-model="name"></p>
        <p>年龄: <input type="text" v-model="age"></p>
        <p>性别: <input type="radio" value="男" v-model="sex" name="sex">男<input type="radio" value="女" v-model="sex" name="sex">女 您选中的是: {{sex}}</p>
        <p>年级:
            <select v-model="grade">
                <option value="大一">大一</option>
                <option value="大二">大二</option>
                <option value="大三">大三</option>
            </select>
        </p>
        <p>爱好: 
            <input type="checkbox" value="吃饭" v-model="hobby">吃饭 
            <input type="checkbox" value="睡觉" v-model="hobby">睡觉 
            <input type="checkbox" value="打游戏" v-model="hobby">打游戏 
            <input type="checkbox" value="做梦" v-model="hobby">做梦</p>
        <p>同意本站协议: <input type="checkbox" v-model="choose"></p>
        <p><button :disabled="!choose" >注册</button></p>
        <p><textarea cols="70" rows="10">{{show()}}</textarea></p>
       </form>
    </div>
    <script>
        const v_app = Vue.createApp({
            data() {
                return {
                    name:"",
                    age:"",
                    grade:"",
                    hobby:[],
                    sex:"",
                    choose:"",
                }
            },
            methods:{
                show(){
                    return "姓名:"+this.name+" 年龄:"+this.age+" 性别:"+this.sex+" 年级:"+this.grade+" 爱好:"+this.hobby;
                }
            }
        });
        v_app.mount("#app");
    </script>
</body>

</html>